<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>移动端原型图预览</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system,
          BlinkMacSystemFont,
          'Helvetica Neue',
          Helvetica,
          Segoe UI,
          Arial,
          Roboto,
          'PingFang SC',
          'miui',
          'Hiragino Sans GB',
          'Microsoft Yahei',
          sans-serif;
        background-color: #f7f8fa;
        color: #323233;
        line-height: 1.5;
      }

      .container {
        max-width: 750px;
        margin: 0 auto;
        padding: 20px;
      }

      .header {
        text-align: center;
        margin-bottom: 30px;
      }

      .header h1 {
        font-size: 24px;
        margin-bottom: 10px;
      }

      .header p {
        font-size: 14px;
        color: #969799;
      }

      .prototype-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }

      .prototype-card {
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04);
        transition: transform 0.3s ease;
      }

      .prototype-card:hover {
        transform: translateY(-5px);
      }

      .prototype-image {
        height: 200px;
        background-color: #f2f3f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #969799;
        font-size: 14px;
        position: relative;
        overflow: hidden;
      }

      .prototype-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .prototype-image .icon {
        font-size: 36px;
        margin-bottom: 10px;
      }

      .prototype-content {
        padding: 12px;
      }

      .prototype-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 6px;
      }

      .prototype-desc {
        font-size: 12px;
        color: #969799;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .prototype-tag {
        display: inline-block;
        font-size: 10px;
        color: #1989fa;
        background-color: #e8f3ff;
        padding: 2px 6px;
        border-radius: 4px;
        margin-top: 8px;
      }

      .device-mockup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 100;
      }

      .device {
        width: 375px;
        height: 667px;
        background-color: #fff;
        border-radius: 30px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      }

      .device-header {
        height: 30px;
        background-color: #000;
        position: relative;
      }

      .device-notch {
        position: absolute;
        width: 150px;
        height: 20px;
        background-color: #000;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      .device-screen {
        height: calc(100% - 30px);
        overflow: hidden;
        position: relative;
      }

      .device-screen iframe {
        width: 100%;
        height: 100%;
        border: none;
      }

      .device-home {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 5px;
        background-color: #000;
        border-radius: 3px;
      }

      .close-mockup {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        border: none;
      }

      @media (max-width: 600px) {
        .prototype-list {
          grid-template-columns: 1fr;
        }

        .device {
          width: 320px;
          height: 568px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>移动端原型图预览</h1>
        <p>基于设计文档开发的移动端系统原型图</p>
      </div>

      <div class="prototype-list">
        <div class="prototype-card" onclick="showMockup('login')">
          <div class="prototype-image">
            <div>
              <div class="icon">🔑</div>
              <div>登录模块</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">登录</div>
            <div class="prototype-desc">
              系统用户和客户的登录界面，支持账号密码、手机验证码和微信登录
            </div>
            <div class="prototype-tag">系统入口</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('wechat-auth')">
          <div class="prototype-image">
            <div>
              <div class="icon">🔐</div>
              <div>微信授权</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">微信授权</div>
            <div class="prototype-desc">微信授权登录流程，获取用户信息并绑定账号</div>
            <div class="prototype-tag">微信集成</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('system-home')">
          <div class="prototype-image">
            <div>
              <div class="icon">🏠</div>
              <div>系统用户首页</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">系统用户首页</div>
            <div class="prototype-desc">
              系统用户的首页，展示待办事项、数据概览和最近客户/合同/案件
            </div>
            <div class="prototype-tag">系统用户</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('client-home')">
          <div class="prototype-image">
            <div>
              <div class="icon">👤</div>
              <div>客户首页</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">客户首页</div>
            <div class="prototype-desc">客户的首页，展示个人信息、合同信息和案件信息</div>
            <div class="prototype-tag">客户</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('detail')">
          <div class="prototype-image">
            <div>
              <div class="icon">📋</div>
              <div>详情页</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">详情页</div>
            <div class="prototype-desc">客户/合同/案件的详情页，展示详细信息和关联数据</div>
            <div class="prototype-tag">通用组件</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('stats')">
          <div class="prototype-image">
            <div>
              <div class="icon">📊</div>
              <div>数据统计</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">数据统计</div>
            <div class="prototype-desc">数据统计分析页面，展示客户/合同/案件的统计图表</div>
            <div class="prototype-tag">数据可视化</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('message')">
          <div class="prototype-image">
            <div>
              <div class="icon">💬</div>
              <div>消息中心</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">消息中心</div>
            <div class="prototype-desc">消息中心页面，展示系统通知和用户消息</div>
            <div class="prototype-tag">通信</div>
          </div>
        </div>

        <div class="prototype-card" onclick="showMockup('profile')">
          <div class="prototype-image">
            <div>
              <div class="icon">⚙️</div>
              <div>个人中心</div>
            </div>
          </div>
          <div class="prototype-content">
            <div class="prototype-title">个人中心</div>
            <div class="prototype-desc">个人中心页面，展示用户信息和系统设置</div>
            <div class="prototype-tag">设置</div>
          </div>
        </div>
      </div>
    </div>

    <div class="device-mockup" id="deviceMockup">
      <div class="device">
        <div class="device-header">
          <div class="device-notch"></div>
        </div>
        <div class="device-screen">
          <iframe id="prototypeFrame" src=""></iframe>
        </div>
        <div class="device-home"></div>
      </div>
      <button class="close-mockup" onclick="closeMockup()">×</button>
    </div>

    <script>
      function showMockup(type) {
        // 在实际项目中，这里应该加载对应的Vue组件
        // 这里我们只是模拟显示一个框架
        document.getElementById('deviceMockup').style.display = 'flex'
        document.getElementById('prototypeFrame').src = `prototype-frames/${type}.html`
      }

      function closeMockup() {
        document.getElementById('deviceMockup').style.display = 'none'
        document.getElementById('prototypeFrame').src = ''
      }
    </script>
  </body>
</html>
